<script setup lang="ts">
import { LocationFilled, PhoneFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
defineOptions({
  name: 'Homeheader',
})
const patientInfor = ref({
  sex: '男',
})
const checked2 = ref(true)
</script>

<template>
  <div id="Homeheader">
    <div class="sickbox">
      <div class="img">
        <img
          v-if="patientInfor.sex == '男'"
          src="../../../../../assets/images/headPortrait.png"
        />
        <img v-else src="../../../../../assets/images/woman.png" />
      </div>
      <div class="sicktitle">
        <div class="list">
          <div class="li">
            <span class="li_n">小白菜</span>
            <span class="li_n">男</span>
            <span class="li_n">23岁</span>
            <span class="li_n li_b">职工基本医疗保险</span>
          </div>
          <div class="li">
            <el-icon><PhoneFilled /></el-icon>
            <span>19137641435</span>
            <el-icon><LocationFilled /></el-icon>
            <span>宁波市鄞州区</span>
          </div>
        </div>
        <div class="list">
          <div class="li">
            <span class="li_t">身份证号：</span>
            <span>411327200104042919</span>
          </div>
          <div class="li">
            <span class="li_t">就诊卡号：</span>
            <span>2768581789</span>
          </div>
        </div>
        <div class="list">
          <div class="li">
            <span class="li_t">挂号类别：</span>
            <span class="li_b">自费</span>
          </div>
          <div class="li">
            <span class="li_t">药物过敏：</span>
            <span>无</span>
          </div>
        </div>
        <div class="list">
          <div class="li">
            <span class="li_t">复诊：</span>
            <el-checkbox v-model="checked2"></el-checkbox>
          </div>
          <div class="li">
          </div>
        </div>
        <div class="list" style="margin-left: auto;">
          <div class="li"></div>
          <div class="li">
            <el-button type="primary">保存</el-button>
            <el-button type="primary">发送</el-button>
            <el-button type="primary">发送记录</el-button>
            <el-button type="primary">完成就诊</el-button>
            <el-button type="danger">取消就诊</el-button>
            <el-button type="primary">转住院</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#Homeheader {
  padding: 5px;
  .sickbox {
    display: flex;
    .img {
      width: 60px;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .sicktitle {
      flex: 1;
      display: flex;
      font-size: 15px;
      .list {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // width: 300px;
        .li {
          padding: 5px;
          color: #7283a4;
          display: flex;
          align-items: center;
          :deep(.el-checkbox){
            height: 100%;
          }
          .li_n{
            margin-right: 15px;
          }
          .li_b{
            border: 1px solid salmon;
            color: salmon;
          }
        }
      }
    }
  }
}
</style>
